<template>
    <div class="recommended-topics">
      <h2 class="title">专题推荐</h2>
      <hr class="divider" />
      <div class="image-grid">
        <a 
          v-for="(item, index) in images" 
          :key="index" 
          :href="item.link" 
          target="_blank" 
          class="topic-link"
        >
          <img 
            :src="item.src" 
            :alt="item.alt" 
            class="topic-image"
          />
        </a>
      </div>
    </div>
  </template>
  
  <script setup>
  const images = [
    { src: new URL('@/assets/pic/Home/image1.png', import.meta.url).href, alt: '主题图片 1', link: 'http://cpc.people.com.cn/GB/67481/458835/index.html' },
    { src: new URL('@/assets/pic/Home/image2.png', import.meta.url).href, alt: '主题图片 2', link: 'http://cpc.people.com.cn/GB/67481/448260/index.html' },
    { src: new URL('@/assets/pic/Home/image3.png', import.meta.url).href, alt: '主题图片 3', link: 'http://cpc.people.com.cn/GB/67481/382991/index.html' },
    { src: new URL('@/assets/pic/Home/image4.png', import.meta.url).href, alt: '主题图片 4', link: 'http://cpc.people.com.cn/GB/67481/382991/index.html' },
    { src: new URL('@/assets/pic/Home/image5.png', import.meta.url).href, alt: '主题图片 5', link: 'http://dangjian.people.com.cn/GB/136058/431693/index.html' },
    { src: new URL('@/assets/pic/Home/image6.png', import.meta.url).href, alt: '主题图片 6', link: 'http://dangjian.people.com.cn/GB/136058/457314/index.html' },
    { src: new URL('@/assets/pic/Home/image7.png', import.meta.url).href, alt: '主题图片 7', link: 'http://dangshi.people.com.cn/GB/441270/index.html' },
    { src: new URL('@/assets/pic/Home/image8.png', import.meta.url).href, alt: '主题图片 8', link: 'http://dangjian.people.com.cn/GB/136058/448887/index.html' }
  ];
  </script>
  
  <style scoped>
  .recommended-topics {
    width: 70%; /* 组件宽度 */
    margin: 0 auto; /* 居中 */
    background-color: white; /* 背景色，设置为白色 */
    padding: 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
  }
  
  .title {
    text-align: center; /* 标题居中 */
    color: #D74339; /* 修改标题文字颜色为指定颜色 */
    font-size: 24px; /* 字体大小 */
    margin: 0; /* 去掉默认外边距 */
  }
  
  .divider {
    height: 2px; /* 横线的高度 */
    background-color: #D74339; /* 横线的颜色 */
    border: none; /* 去掉边框 */
    margin: 20px 0; /* 上下的间距 */
  }
  
  .image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 每行四列 */
    gap: 10px; /* 图片之间的间距 */
  }
  
  .topic-link {
    display: block; /* 让链接行整个图片大小 */
  }
  
  .topic-image {
    width: 100%; /* 图片宽度占满 */
    height: 100px; /* 高度保持比例 */
    border-radius: 5px; /* 图片圆角 */
    object-fit: cover; /* 保持图片比例 */
  }
  </style>
  